<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
    <script src="https://cdn.bootcss.com/lz-string/1.4.4/lz-string.js"></script>
    <title>Document</title>
</head>
<body>
    <button id="btn" >点击 </button>
    <div >
        测试视频录制
    </div>
    <iframe src="" frameborder="0"></iframe>
<script>
//    document.querySelector('#btn').onclick = ()=>{alert('点击')}
//    var xhr = new XMLHttpRequest();
//    xhr.open("GET", "/api/record/detail?id=23424252352"); // 获取 rrweb 原始数据
//    xhr.onreadystatechange = function () {
//        if (xhr.readyState === 4 && xhr.status === 200) {
//            let res = xhr.responseText;
//            res = JSON.parse(res);
//            let data = LZString.decompressFromBase64(res.data);
//            data = JSON.parse(data);
//            window.chromePlayer = new rrweb.Replayer(data);
//            window.chromePlayer.play();
//        }
//    };
//    xhr.send();
    fetch('http://testopen.iancar.cn/hermessys/record/insuTrace',{
        method : 'post',
        body:JSON.stringify({
            vedioSeriesNo:773221935289991168,
            typeId:1
        })
    })
        .then(res=>{
            return res.json()
        })
        .then(res=>{
            console.log(res)
            let re = JSON.parse(JSON.parse(res.data.record)).events
            new rrwebPlayer({
                target: document.getElementById('video'), // 可以自定义 DOM 元素
                data: {
                    events:re
                },
            });
    })
</script>
</body>
</html>
